<template>
  <div class="main">
    我是{{$store.getters.getUserInfo}}
    <el-form
      ref="loginusernameFormRef"
      :rules="loginusernameRules"
      :model="loginusernameForm"
      label-width="80px"
    >
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginusernameForm.password"></el-input>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form-item>
        <el-button type="primary" @click="test">test</el-button>
    </el-form>
  </div>
</template>

<script>
import { cleanSessionStore ,getSessionStoreItem} from "../../utils/utils.js";

export default {
  name: "Main",
  data() {
    return {
      loginusernameForm: {
        password: ""
      },
      loginusernameRules: {
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  watch: {},
  created() {},
  // 挂载到实例上去之后调用该钩子
  mounted() {
    // 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.nextTick 替换掉 mounted
  },
  // 计算属性
  computed: {},
  methods: {
    //修改密码
    onSubmit() {
      console.log(1);
      this.$refs.loginusernameFormRef.validate((valid, obj) => {
        //验证失败
        if (!valid) return;
        //验证成功
        console.log("成功");
        //开始修改密码
        this.$http({
          method: "put",
          url: `/user/updatePwdById`,
          headers: {
            // Authorization: getSessionStoreItem("token")
          },
          data:{
            password:`${this.loginusernameForm.password}`
          }
        }).then(res => {
          console.log(res);
          if (res.data.code !== 200) {
            return this.$message.error(res.data.msg);
          }
          //修改成功
          //清除所有登录信息
          //返回到登录界面
          cleanSessionStore();
          this.$router.push("/login");
          this.$message.success("密码修改成功");
        });
      });
    },
    test(){
        this.$http({
          url: `/user/test`,
        }).then(res => {
          console.log(res);
        });
    }
  },
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  destroyed() {}
};
</script>
<style  scoped>
</style>